// ignore_for_file: file_names

import "package:flutter/material.dart";

@immutable
class LoginInput extends StatefulWidget {
    final String placeholder;
    final IconData icon;
    final double height;
    final EdgeInsets margin;
    final bool isPassword;
    final bool disabled;

    const LoginInput({
        super.key,
        this.placeholder = "请输入文本",
        this.icon = Icons.account_circle,
        required this.margin,
        this.height = 50,
        this.isPassword = false,
        this.disabled = false
    });
    @override
    State<StatefulWidget> createState() {
        return LoginInputState(placeholder: placeholder, icon: icon, height: height, margin: margin, isPassword:isPassword, disabled: disabled);
    }
}

class LoginInputState extends State<LoginInput> with TickerProviderStateMixin {
    final String placeholder;
    final IconData icon;
    final double height;
    final EdgeInsets margin;
    final bool isPassword;
    bool disabled;

    AnimationController? controller;
    Animation<double>? animation;
    Animation<double>? lFAnimation;
    AnimationController? lFController;
    FocusNode? inputFocusNode;
    bool hasFocus = false, hasDoAnimation = false;
    double initOffsetValue = 6.0;
    Color iconColor = Colors.grey;
    String inputText = "";
    LoginInputState({
        this.placeholder = "请输入内容",
        this.icon = Icons.access_alarm,
        required this.margin,
        this.height = 50,
        this.isPassword = false,
        this.disabled = false }
    );
    
    @override
    initState() {
        super.initState();

        AnimationController controller = AnimationController(duration: const Duration(milliseconds: 500), vsync: this);
        AnimationController lFController = AnimationController(duration: const Duration(milliseconds: 500), vsync: this);
        animation = Tween(begin: 6.0, end: 0.0).animate(controller)
            ..addListener(() {
                setState(() {
                // the state that has changed here is the animation object’s value
                });
            });
        lFAnimation = Tween(begin: 0.0, end: 6.0).animate(lFController)
            ..addListener(() {
                setState((){
                    // the state tha has changed here is the animation object's value
                });
            });
        FocusNode inputFocusNode = FocusNode();
        inputFocusNode.addListener(() {
            hasDoAnimation = true;
            if(inputFocusNode.hasFocus) {
                hasFocus = true;
                iconColor = Colors.green;
                lFController.reset();
                controller.forward();
            } else {
                iconColor = Colors.grey;
                hasFocus = false;
                controller.reset();
                lFController.forward();
            }
         });
        // controller.forward();
    }

    @override
    dispose() {
        inputFocusNode?.unfocus();
        controller?.dispose();
        lFController?.dispose();
        super.dispose();
    }
    @override
    Widget build(BuildContext context) {
        double dHeight = height > 0 ? height : 50;
        double dRadius = dHeight / 2;
        double iconAreaWidth = 50;
        double iconOffset = hasDoAnimation ? (hasFocus ? animation?.value ?? 0 : lFAnimation?.value ?? 0) : initOffsetValue;
        bool isEnabled = !disabled;
    
        return Container(
            margin: margin,
            child: Material(
                borderRadius: BorderRadius.all(Radius.circular(dRadius)),
                clipBehavior: Clip.antiAlias,
                child: SizedBox(
                    height: dHeight,
                    child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                            SizedBox(
                                width: iconAreaWidth,
                                height: dHeight,
                                child: Transform.translate(
                                    offset: Offset(iconOffset, 0),
                                    child: Icon(icon, color: iconColor,),
                                )
                            ),
                            Expanded(
                                child: TextField(
                                    decoration: InputDecoration(
                                        border: InputBorder.none,
                                        hintText: placeholder
                                    ),
                                    focusNode: inputFocusNode,
                                    obscureText: isPassword,
                                    keyboardType: TextInputType.visiblePassword,
                                    enabled: isEnabled
                                ),
                            )
                        ],
                    )
                ),
            )
        );
    }
}
